<template>
  <div class="mh-100p">
    <el-menu :default-active="biddingMethod" mode="horizontal" class="bdr-top-10">
      <el-menu-item @click="getBills('')" index="">全部</el-menu-item>
      <el-menu-item @click="getBills('0')" index="0">一口价
        <v-plain-tips :num="orderTips.zero_sum"/>
      </el-menu-item>
      <el-menu-item @click="getBills('1')" index="1">竞价
        <v-plain-tips :num="orderTips.one_sum"/>
      </el-menu-item>
    </el-menu>
    <div class="bg-fff pd-10 fx-1 bdr-bottom-10">
      <div class="top">
        <el-radio-group v-model="orderStatus" @change="getBills(biddingMethod)">
          <el-radio-button :label="item.value" v-for="item in $dict.orderTypes" :key="item.value">
            {{item.label}}
            <v-plain-tips class="tips" :num="orderTips.zero_order_sum+orderTips.one_order_sum" v-if="item.value===0"/>
            <v-plain-tips class="tips" :num="orderTips.zero_to_endorse_sum+orderTips.one_to_endorse_sum"
                          v-if="item.value===2"/>
            <v-plain-tips class="tips" :num="orderTips.zero_to_release_sum+orderTips.one_to_release_sum"
                          v-if="item.value===3"/>
          </el-radio-button>
        </el-radio-group>
        <em class="fx-1"></em>
        <!--<el-checkbox v-model="isCard" label="卡片模式" border></el-checkbox>-->
        <i class="viweExplain">视图：</i>
        <span class="qiehuan-box">
          <i class="iconfont icon-qiapianshi icon-qiehuan-card" :class="{'isCardActive':isCard}" @click="switchoverCard(true)"></i>
          <i class="iconfont icon-liebiaoshi icon-qiehuan-card" :class="{'isCardActive':!isCard}" @click="switchoverCard(false)"></i>
        </span>
      </div>
      <div class="panel">
        <v-bill-card-order-list v-if="isCard" :bills="bills" @change="change" @revocationOrder="revocationOrder" @endorseBill="endorseBill"></v-bill-card-order-list>
        <v-plain-table v-else :data="bills" @change="change">
          <template slot="expand" slot-scope="{scope}">
            <el-button type="text" @click="stopeorder(scope)" v-if="scope.row.orderStatus === 0 || scope.row.orderStatus === 2">撤回</el-button>
            <el-button type="text" @click="showEndorsed(scope.row)" v-if="scope.row.orderStatus === 2">背书
            </el-button>
            <el-button type="text" @click="$router.push(`./detail/${scope.row.id}`)">详情</el-button>
          </template>
        </v-plain-table>
      </div>
    </div>
    <v-plain-dialog
            title="确认背书"
            width="60%"
            ref="endorsed">
      <el-form label-width="100px">
        <el-form-item label="资方账户名">{{currentBillEndorsedDetail.quotationEmployerName}}</el-form-item>
        <el-form-item label="账号">{{currentBillEndorsedDetail.capitalAcctNo}}</el-form-item>
        <el-form-item label="开户行">{{currentBillEndorsedDetail.bankBranchName}}</el-form-item>
        <el-form-item label="开户行行号">{{currentBillEndorsedDetail.capitalLineNumber}}</el-form-item>
        <div style="text-align: center;">
          <el-button type="primary" @click="endorsed(currentBillEndorsedDetail)">确认背书</el-button>
        </div>
      </el-form>
    </v-plain-dialog>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillCardOrderList from '@/components/bill-card-order-list'
  import vPlainTable from '@/components/plain-table'
  import vPlainDialog from '@/components/plain-dialog'
  import vBillDetail from '@/components/bill-detail'
  import vBillTransInfo from '@/components/bill-trans-info'
  import { Action, Getter } from 'vuex-class'
  import vPlainTips from '@/components/plain-tips'

  @Component({
    components: {
      vBillCardOrderList, vPlainTable, vPlainDialog, vBillDetail, vBillTransInfo, vPlainTips
    }
  })
  export default class Order extends Vue {
    orderStatus = ''
    // id = ''
    biddingMethod = ''
    isCard = false
    bills: TableData = {
      header: [
        {
          key: 'id',
          label: '订单编号'
        },
        {
          key: 'billNumber',
          label: '票据号'
        },
        {
          key: 'createTime',
          label: '订单生成时间'
        },
        {
          key: 'faceValue',
          label: '票面金额'
        },
        {
          key: 'everyDeduction',
          label: '每十万扣款'
        },
        {
          key: 'discountAmount',
          label: '贴息额'
        },
        {
          key: 'discountPrice',
          label: '最优贴现价格'
        }
      ],
      body: [],
      footer: {
        total: 0,
        currentPage: 1
      }
    }
    currentBillDetail = {}
    currentBillEndorsedDetail = {}
    @Getter userInfo

    get activeIndex () {
      return this.$route.path
    }

    created () {
      if(this.$route.query.msgType !== null && this.$route.query.msgType !== undefined) {
        this.orderStatus = this.$route.query.msgType
      }
    }

    async getBills (biddingMethod = '') {
      this.biddingMethod = biddingMethod
      let res: AjaxResponse = await this.$axios.post('g/gateway/order', {
        pageSize: 10,
        currentPage: this.bills.footer.currentPage,
        orderStatus: this.orderStatus,
        biddingMethod: this.biddingMethod,
        enterpriseUserId: JSON.parse(window.sessionStorage.getItem('userInfo')).userId
      })
      if (res.responseCode === 200) {
        this.bills.body = res.data.items
        this.bills.footer.total = res.data.totalNum
      }
    }

    async showEndorsed ({ id }) {
      this.$refs.endorsed.openDialog()
      let res: AjaxResponse = await this.$axios.get(`g/gateway/order/${id}`)

      if (res.responseCode === 200) {
        this.currentBillEndorsedDetail = res.data
      }

    }
    // 背书
    async endorseBill (billId) {
      this.$refs.endorsed.closeDialog()
      this.$confirm('请确认买票方付款后再到网银去背书,是否继续?', '确认背书', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async () => {
          let res: AjaxResponse = await this.$axios.post(`g/gateway/txn/endorsed/${billId}`)
          this.$utils.tips(res)
          this.getBills()
          this.getOrderTips()
          this.getMenusTips()
      })
    }
    async endorsed ({ id }) {
      this.$refs.endorsed.closeDialog()
      this.$confirm('请确认买票方付款后再到网银去背书,是否继续?', '确认背书', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res: AjaxResponse = await this.$axios.post(`g/gateway/txn/endorsed/${id}`)
        this.$utils.tips(res)
        this.getBills()
        this.getOrderTips()
        this.getMenusTips()
      })
    }
    // 撤回订单
    async revocationOrder (orderNo) {
      let res:AjaxResponse = await  this.$axios.delete(`g/gateway/txn/stop/${orderNo}`)
      this.$utils.tips(res)
      this.getBills()
      this.getOrderTips()
      this.getMenusTips()
    }
    async stopeorder ({ row }) {
        // console.log(row.orderNo)
        let res:AjaxResponse = await  this.$axios.delete(`g/gateway/txn/stop/${row.orderNo}`)
        this.$utils.tips(res)
        this.getBills()
        this.getOrderTips()
        this.getMenusTips()
    }

    @Action getOrderTips
    @Getter orderTips
    @Action getMenusTips
    @Getter menuTips

    change (page) {
      this.bills.footer.currentPage = page
      this.getBills()
    }

    switchoverCard (cardBollen) {
        if(cardBollen) {
            this.isCard = true
        }else{
            this.isCard = false
        }
    }

    mounted () {
      this.getBills()
      setInterval(_ => {
        this.getBills()
      }, 1000 * 60 * 3)
      this.getOrderTips()
    }
  }
</script>

<style lang="less" scoped>
  .mh-100p {
    display: flex;
    flex-direction: column;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .top {
    display: flex;
    padding-bottom: 20px;
  }

  .operation {
    margin-top: 20px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;
  }

  .tips {
    position: absolute;
    right: 2px;
    top: 10px;
  }
  .icon-qiehuan-card {
    display: inline-block;
    font-size: 24px;
    cursor: pointer;
    height: 38px;
    color: #ddd;
    width: 43.5px;
    text-align: center;
    padding: 0;
  }
  .icon-qiapianshi {
    border-right: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .icon-liebiaoshi {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .qiehuan-box {
    width: 90px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    height: 40px;
    line-height: 40px;
    display: flex;
  }
  .isCardActive {
    background: #f2f6f9;
  }
  .viweExplain {
    color: #666;
    line-height: 40px;
  }
</style>
